<template>
  <div class="favorite" v-if="boys.total > 0 || gilrs.total > 0">
    <ul class="nav">
      <li
        :class="active == nav.id ? 'active' : ''"
        @click="toggleNav(nav.id)"
        v-for="nav of navs"
        :key="nav.id"
        v-text="nav.name"
      ></li>
    </ul>
    <div class="page-tab-container">
      <mt-tab-container v-model="active" swipeable>
        <mt-tab-container-item id="1">
          <mt-spinner
            v-if="loading"
            class="loading"
            type="snake"
            color="#E86472"
            :size="45"
          ></mt-spinner>
          <ul class="info-list" v-else-if="boys.total > 0">
            <list-template
              v-for="item of boys.records"
              :key="item.bookId"
              :item="item"
              :diff="'home-favorite'"
            />
          </ul>
          <div class="empty" v-else>
            <span>No resources available</span>
          </div>
          <p
            class="load-more"
            v-if="boysMore && boys.total > 0"
            @click="loadMore(1)"
          >
            More
          </p>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <mt-spinner
            v-if="loading"
            class="loading"
            type="snake"
            color="#E86472"
            :size="45"
          ></mt-spinner>
          <ul class="info-list" v-else-if="gilrs.total > 0">
            <list-template
              v-for="item of gilrs.records"
              :key="item.bookId"
              :item="item"
              :diff="'home-favorite'"
            />
          </ul>
          <div class="empty" v-else>
            <span>No resources available</span>
          </div>
          <p
            class="load-more"
            v-if="gilrsMore && gilrs.total > 0"
            @click="loadMore(2)"
          >
            More
          </p>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>

<script>
import listTemplate from "@/components/common/listTemplate/Index";
export default {
  data() {
    return {
      navs: [], // 总列表
      boys: {}, //男频列表
      gilrs: {}, //女频列表
      params: {
        1: {
          //男频参数
          pageNum: 1,
          pageSize: 20,
        },
        2: {
          //女频参数
          pageNum: 1,
          pageSize: 20,
        },
      },
      active: "2", //默认选中频道
      boysMore: true,
      gilrsMore: true,
      loading: true,
    };
  },
  components: {
    listTemplate,
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.favorite();
  },
  methods: {
    toggleNav(active) {
      this.active = active + "";
    },
    async favorite(preference) {
      try {
        if (preference) {
          let res = await this.$api.home.favorite({
            ...this.params[preference],
            preference,
          });
          if (res.code === 1) {
            let obj = res.source[0];
            if (obj.id === 1) {
              if (obj.bookList) {
                this.boys.current = obj.bookList.current;
                this.boys.records.push(...obj.bookList.records);
                this.boysMore = obj.bookList.current < obj.bookList.pages;
              } else {
                this.boysMore = false;
              }
            } else if (obj.id === 2) {
              if (obj.bookList) {
                this.gilrs.current = obj.bookList.current;
                this.gilrs.records.push(...obj.bookList.records);
                this.gilrsMore = obj.bookList.current < obj.bookList.pages;
              } else {
                this.gilrsMore = false;
              }
            }
          }
        } else {
          this.loading = true;
          let res = await this.$api.home.favorite(this.params[this.active]);
          if (res.code === 1) {
            this.navs = res.source;
            res.source.forEach((item) => {
              if (item.id === 1 && item.bookList) {
                this.boys = item.bookList;
                this.boysMore = item.bookList.current < item.bookList.pages;
              } else if (item.id === 2 && item.bookList) {
                this.gilrs = item.bookList;
                this.gilrsMore = item.bookList.current < item.bookList.pages;
              }
            });
          }
          this.loading = false;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 加载更多
    loadMore(key) {
      try {
        this.params[key].pageNum += 1;
        this.favorite(key);
        // let params = {
        //   preference: this.active
        // }
        //   this.params.pageNum += 1;
        //   // Object.assign(this.params,{preference:this.active});
        //   let res = await this.$api.home.favorite({...this.params});
        //   console.log(this.params)
        //   if (res.code === 1) {
        //       this.boys = res.source;
        //   }
        //   this.loading = false;
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.favorite {
  padding: 0 40px;
  margin-bottom: 30px;
  .nav {
    width: 100%;
    height: 105px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    overflow-y: hidden;
    overflow-x: auto;
    border-bottom: 2px solid #eeeeee;
    li {
      height: 100%;
      line-height: 105px;
      font-size: 34px;
      font-family: PingFang-SC-Bold, PingFang-SC;
      font-weight: bold;
      color: #333333;
      box-sizing: border-box;
      &:not(:first-child) {
        margin-left: 68px;
      }
      &.active {
        border-bottom: 4px solid #e86472;
      }
    }
  }
  .page-tab-container {
    .load-more {
      font-size: 22px;
      line-height: 30px;
      text-align: center;
      color: #e86472;
    }
    .loading {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .empty {
      height: 500px;
      line-height: 500px;
      text-align: center;
    }
  }
}
</style>
